<template>
    <a-form class="smart-query-form">
        <a-row class="smart-query-form-row">


            <a-form-item label="创建时间" class="smart-query-form-item">
                <a-space direction="vertical" :size="12">
                    <a-range-picker v-model:value="createDate" :presets="defaultTimeRanges"
                     @change="createDateChange" />
                </a-space>
            </a-form-item>
            <a-form-item label="状态" class="smart-query-form-item">
                <a-radio-group v-model:value="queryForm.state" buttonStyle="solid">
                    <a-radio-button :value="undefined">全部</a-radio-button>
                    <a-radio-button :value="0">待提交</a-radio-button>
                    <a-radio-button :value="1">已审核</a-radio-button>
                </a-radio-group>
            </a-form-item>

            <a-form-item class="smart-query-form-item smart-margin-left10">
                <a-button-group>
                    <a-button type="primary" @click="onSearch">
                        <template #icon>
                            <ReloadOutlined />
                        </template>
                        查询
                    </a-button>
                    <a-button @click="resetQuery">
                        <template #icon>
                            <SearchOutlined />
                        </template>
                        重置
                    </a-button>
                </a-button-group>
            </a-form-item>
        </a-row>
    </a-form>


    <a-card size="small" :bordered="false" :hoverable="true">
        <a-row class="smart-table-btn-block">
            <div class="smart-table-operate-block">
                <a-button type="primary" @click="addOrUpdate()">
                    <template #icon>
                        <PlusOutlined />
                    </template>
                    新增
                </a-button>
                <a-button type="primary">
                    <template #icon>
                        <FileExcelOutlined />
                    </template>
                    同步
                </a-button>
            </div>

            <div class="smart-table-setting-block">
                <TableOperator v-model="columns" :tableId="TABLE_ID_CONST.aneswork.inanes.inanes"
                    :refresh="ajaxQuery" />
            </div>

        </a-row>

        <a-table size="small" class="ant-table-striped" :columns="columns"
        rowKey="id"
        :pagination="false" :dataSource="tableData"
            bordered :scroll="{ x: 1300 }"
            :rowClassName="(record, index) => (index % 2 === 0 ? 'table-row-light' : 'table-row-dark')"
            >

            <template #bodyCell="{ column, record }">
                <template v-if="column.dataIndex === 'action'">
                    <a-button @click="addOrUpdate(record)" size="small" type="link">明细</a-button>
                    <a-button @click="update(record,'1')" size="small" type="link">提交</a-button>
                    <a-button @click="update(record,'0')" size="small" danger type="link">取消</a-button>
                </template>
                <template v-else-if="column.dataIndex === 'state'">
                    <a-tag v-if="record.state === '0'" color="#f50">待提交</a-tag>
                    <!-- <a-tag v-if="record.state === '1'" color="#2db7f5">待审核</a-tag> -->
                    <a-tag v-if="record.state === '1'" color="#87d068">完成</a-tag>
                </template>
                <template v-else-if="column.dataIndex === 'scheduledDateTime'">
                    {{ record.scheduledDateTime ? dayjs(record.scheduledDateTime).format('YYYY-MM-DD HH:mm') : '-' }}
                </template>
                <template v-else-if="column.dataIndex === 'createTime'">
                    {{ record.createTime ? dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss') : '-' }}
                </template>
            </template>
        </a-table>
        <div class="smart-query-table-page">
            <a-pagination showSizeChanger showQuickJumper show-less-items :pageSizeOptions="PAGE_SIZE_OPTIONS"
                :defaultPageSize="queryForm.pageSize" v-model:current="queryForm.pageNum"
                v-model:pageSize="queryForm.pageSize" :total="total" @change="ajaxQuery" @showSizeChange="ajaxQuery"
                :show-total="(total) => `共${total}条`" />
        </div>

    </a-card>
    <AnesFormDrawer ref="AnesFormDrawerRef"  @reloadList="onSearch"/>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue';
import TableOperator from '/@/components/support/table-operator/index.vue';
import { TABLE_ID_CONST } from '/@/constants/support/table-id-const';
import { PAGE_SIZE, PAGE_SIZE_OPTIONS } from '/@/constants/common-const';
import { anesApi } from '/@/api/anes/aneswork/aneswork-api';
import { smartSentry } from '/@/lib/smart-sentry';
import { defaultTimeRanges } from '/@/lib/default-time-ranges';
import { encryptData } from '/@/lib/encrypt';
import AnesFormDrawer from './AnesFormDrawer.vue';
import dayjs from 'dayjs';
import { Row, Col, Radio, message } from 'ant-design-vue';



//---------表格字段列表----------------------------------------------------------------
const columns = ref([
    {
        title: '状态',
        dataIndex: 'state',
        width: 65,
        fixed: 'left',
        align: 'center',

    },
    {
        title: '手术日期',
        dataIndex: 'scheduledDateTime',
        width: 150,
        align: 'center',
    },
    {
        title: '住院号',
        dataIndex: 'inpNo',
        width: 100,
        align: 'center',
    },
    {
        title: '手术间',
        width: 100,
        dataIndex: 'operatingRoomNo',
        align: 'center',
    },
    {
        title: '台次',
        width: 50,
        dataIndex: 'sequence',
        align: 'center',
    },
    {
        title: '姓名',
        width: 60,
        dataIndex: 'name',
        align: 'center',
    },
    {
        title: '性别',
        width: 50,
        dataIndex: 'sex',
        align: 'center',
    },
    {
        title: '病区/床号',
        width: 150,
        dataIndex: 'bedNo',
        align: 'center',
    },
    
    {
        title: '麻醉方法',
        dataIndex: 'anesthesiaMethod',
        width: 100,
        align: 'center',
    },
    {
        title: '诊断',
        dataIndex: 'diagnosis',
        width: 350,
        align: 'center',
        ellipsis: true,
    },
    {
        title: '手术名称',
        dataIndex: 'operationName',
        width:350,
        align: 'center',
        ellipsis: true,
    },
    // {
    //     title: '手术者',
    //     dataIndex: 'surgeon',
    //     width: 60,
    //     align: 'center',
    // },
  
    {
        title: '带教老师',
        width: 80,
        dataIndex: 'teacher',
        align: 'center',
    },
    {
        title: '创建人',
        dataIndex: 'createPeople',
        width: 60,
        align: 'center',
    },

    {
        title: '提交时间',
        dataIndex: 'createTime',
        width: 250,
        align: 'center',
    },
    // {
    //     title: '审核人',
    //     dataIndex: 'checkPeople',
    //     width: 60,
    //     align: 'center',
    // },
    {
        title: '操作',
        dataIndex: 'action',
        fixed: 'right',
        width: 150,
    },
]);

//---------表单查询字段----------------------------------------------------------------
const queryFormState = {
    startTime: dayjs().startOf('month'),
    endTime: new Date(),
    pageNum: 1,
    pageSize: PAGE_SIZE,
    state: undefined,
};
const queryForm = reactive({ ...queryFormState });
const tableLoading = ref(false);
const tableData = ref([]);
const total = ref(0);


// 重置查询条件
function resetQuery() {
    let pageSize = queryForm.pageSize;
    Object.assign(queryForm, queryFormState);
    queryForm.pageSize = pageSize;
    queryData();
}
// 搜索
function onSearch() {
    queryForm.pageNum = 1;
    queryData();
}

// 创建日期选择
const createDate = ref([
    dayjs().startOf('month'), // 当月第一天
    dayjs() 
]);

function createDateChange(dates, dateStrings) {
    queryForm.startTime = dateStrings[0];
    queryForm.endTime = dateStrings[1];
}

// 查询数据
async function queryData() {
    tableLoading.value = true;
    let data = { encryptData: encryptData(queryForm) };
    try {
        let result = await anesApi.queryAnesworkListSM4(data);
        console.log(result);
        tableData.value = result.data.list
        total.value = result.data.total

    } catch (e) {
        smartSentry.captureError(e);
    } finally {
        tableLoading.value = false;
    }
}


  // ------------------ 新建、编辑 ------------------

  // 新建、编辑
  const AnesFormDrawerRef = ref();
  function addOrUpdate(record) {
    console.log(record);
    if (record) {
      // 明细操作，传入id
      AnesFormDrawerRef.value.showAnesModal(record);
    } else {
      // 新增操作，不传id
      AnesFormDrawerRef.value.showAnesModal();
    }
  }

  async  function update(record,state){
        const submitData = record;
        submitData.state = state
    
        
        let data = { encryptData: encryptData(submitData) };
        let response  = await anesApi.updateAneswork(data);
        if (response.code === 0) {
            message.success('保存成功');
            queryData();
        } else {
            message.error(response.message || '保存失败');
        }
  }

onMounted(queryData);

async function ajaxQuery() {

}
</script>


<style scoped>
.ant-table-striped :deep(.table-striped) td {
    background-color: #fafafa;
}

</style>
